<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>附件列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-col :span="4">
              <el-form-item prop="name" label="名称">
                <el-input v-model="queryInfo.name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="type" label="类型">
                <el-select v-model="queryInfo.type" placeholder="请选择">
                  <el-option v-for="(value, key, index) in $listDict('ANNEX_TYPE')" :key="index" :label="value"
                    :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="createName" label="上传人">
                <el-input v-model="queryInfo.createName" />
              </el-form-item>
            </el-col>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table :page="page" @changePage="search">
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column label="类型" align="center" width="100">
              <template #default="scope">
                {{ $getDictLabel('ANNEX_TYPE', scope.row.type, '其它') }}
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center" width="80" />
            <el-table-column prop="createName" label="上传人" width="100" />
            <el-table-column prop="createTime" label="上传时间" align="center" width="150"
              :formatter="(row: any) => $moment(row.createTime, 'YYYY-MM-DD HH:mm')" />
            <el-table-column label="操作" fixed="right" align="center" width="150">
              <template #default="scope">
                <el-button-group>
                  <el-button type="danger" icon="el-icon-delete" size="small" title="删除"
                    v-if="$hasPermission('file:annex:delete')" @click="del(scope.row)" />
                  <el-button type="primary" icon="el-icon-download" size="small" title="下载"
                    @click="download(scope.row)" />
                </el-button-group>
              </template>
            </el-table-column>
          </template>
        </autumn-table>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import hooks from 'src/hook/index'
import { $listDict, $getDictLabel, $confirmMsg, $hasPermission, $moment } from 'src/util/tools'
import { pageAnnex, deleteAnnex } from 'src/api/file/index'

// 分页查询
const queryInfo = reactive({
  name: '',
  type: '',
  createName: ''
})
const { page, initIndex, search } = hooks.useTable((pageNumber: number, pageSize: number) => {
  pageAnnex({ queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
})

// 删除
function del(row: any) {
  const ids = [row.id]
  $confirmMsg('确认删除吗？', () => {
    deleteAnnex(ids).then(() => {
      search()
    })
  })
}

// 下载
function download(row: any) {
  const fileId = row.fileId
  // const downUrl = $downloadUrl(fileId)
  // window.open(downUrl, '_blank')
}
</script>

<style lang="scss" scoped></style>
